<template>
  <div>
    <div v-show="$route.name == 'project-list'">
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>项目管理记录</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图区域 -->
      <el-card>
        <div style="margin-bottom: 20px;">项目管理记录</div>
        <!-- 搜索与添加区域 -->
        <el-row class="query"></el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="success" @click="addProject">新增项目</el-button>
          </el-col>
        </el-row>
        <el-table
          border
          :loading="loading"
          :data="projectData"
          style="margin-top: 10px;">
          <el-table-column type="index" :index="indexMethod" min-width="50" align="center"></el-table-column>
          <el-table-column label="项目名称" prop="project_name" min-width="160" align="center"></el-table-column>
          <el-table-column label="部门" prop="department_name" min-width="160" align="center"></el-table-column>
          <el-table-column label="相关人员" prop="project_user" min-width="160" align="center"></el-table-column>
          <el-table-column label="项目描述" prop="desc" min-width="200" align="center"></el-table-column>
          <el-table-column label="操作" width="220" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="clickButton(scope.row.id, 1)" style="margin-right: 5px;">详情</el-button>
              <el-button size="mini" type="warning" @click="clickButton(scope.row.id, 2)" style="margin-right: 5px;">编辑</el-button>
              <el-button size="mini" type="danger" @click="clickButton(scope.row.id, 3)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pager.currPage"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="pager.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pager.totalCount">
        </el-pagination>
      </el-card>
    </div>
    <div>
      <router-view />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      pager: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      projectData: [],
      user_id: '',
      departmentId: []
    }
  },
  watch: {
    $route(now, old) {
      if (old.name === 'project-detail' || old.name === 'project-save' || old.name === 'project-update') {
        this.getProjectList()
      }
    }
  },
  mounted() {
    // 获取自身信息
    this.getUser()
  },
  methods: {
    addProject() {
      this.$router.push({ 'name': 'project-save' })
    },
    // 获取用户信息
    async getUser() {
      this.user_id = localStorage.getItem('task_user')
      const { data: result } = await this.$http.get('/user/' + this.user_id)
      result.data.department.forEach(element => {
        this.departmentId.push(element.id)
      })
      this.getProjectList()
    },
    async getProjectList() {
      this.loading = true
      const params = {
        page: this.pager.currPage,
        pageSize: this.pager.pageSize,
        departmentId: this.departmentId
      }
      const { data: result } = await this.$http.get('/project', { params: params })
      if (result.status !== 200) {
        this.loading = false
        this.projectData = '暂无数据'
        return this.$message.error(result.msg)
      }
      this.loading = false
      this.projectData = result.data
      this.pager = result.pager
    },
    clickButton(id, type) {
      if (type === 1) {
        this.$router.push({
          name: 'project-detail',
          params: { id: id }
        })
      } else if (type === 2) {
        this.$router.push({
          name: 'project-update',
          params: { id: id }
        })
      } else {
        this.deleteProject(id)
      }
    },
    async deleteProject(id) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm('删除该项目，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const { data: result } = await this.$http.delete('/project/' + id)
      if (result.status !== 200) return this.$message.error(result.msg)
      this.getProjectList()
      this.$message.success('删除成功！')
    },
    handleSizeChange(pageSize) {
      this.pager.pageSize = pageSize
      this.getProjectList()
    },
    handleCurrentChange(currentPage) {
      this.pager.currPage = currentPage
      this.getProjectList()
    },
    indexMethod(index) {
      index = index + 1
      if (this.pager.currPage > 1) {
        index = index + (this.pager.currPage - 1) * this.pager.pageSize
      }
      return index
    },
  }
}
</script>
